<template>
  <div class="head">
    <div class="left topborder">
      <div class="clock">
        <div class="years">2022</div>
        <div class="monthDay">08/15</div>
      </div>
    </div>
    <div class="center">
      <div class="overview left-text" @click="goto('/')" :style="{opacity: atPresent=='construction'? 1 : 0.5}">建设总览</div>
      <div class="titles"><div class="mains"></div></div>
      <div class="overview right-text" @click="goto('/management')" :style="opcity()">管护总览</div>
    </div>
    <div class="right topborder">
      <div class="btn">管理系统</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      atPresent: 'construction'
    };
  },
  created() {
    
  },
  mounted() {
    let arr = window.location.href.split('/')
    this.atPresent = arr[arr.length - 1]
  },

  methods: {
    opcity() {
      if(this.atPresent == 'management' || this.atPresent == 'vtour') {
        return 'opacity: 1;'
      } else {
        return 'opacity: .5;'
      }
    },
    goto(path){
      this.$router.push(path)
    }
  },
};
</script>

<style lang="scss" scoped>
.head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 144px;
  background: linear-gradient(rgba(16,44,73,1), rgba(16,44,73,.7) 50%,rgba(16,44,73,0));
  .topborder {
    background: url(~@/assets/images/borderline.png) no-repeat bottom;
    background-size: 100%;
    width: 350px;
    max-height: 60px;
  }
  .left {
    text-align: left;
    padding-top: 10px;
    .clock{
      display: inline-block;
      border-right: 4px solid #115EA6;
      padding-right: 14px;
      .years {
        font-size: 20px;
      }
      .monthDay {
        font-size: 15px;
        color: #50A2FF;
      }
    }
  }
  .center {
    font-size: 20px;
    display: flex;
    position: relative;
    .titles {
      position: relative;
      width: 866px;
      .mains {
        position: absolute;
        background: url(~@/assets/images/1.png) no-repeat;
        background-size: 100%;
        height: 144px;
        width: 100%;
      }
    }
    .overview {
      background: url(~@/assets/images/2.png) no-repeat;
      background-size: 100% 100%;
      width: 215px;
      height: 57px;
      font-family: ysbt;
      margin-top: 5px;
      cursor: pointer;
      text-align: center;
      padding-top: 15px;
    }
    .overview:nth-child(3){
      background: url(~@/assets/images/3.png) no-repeat;
    }
    .left-text {
      position: absolute;
      left: -180px;
      top: 0;
    }
    .right-text {
      position: absolute;
      right: -180px;
      top: 0;
    }
  }
  .right {
    font-size: 20px;
    color: #88BAF2;
    text-align: right;
    padding-top: 15px;
    .btn {
      display: inline-block;
      background: url(~@/assets/images/btn.png) no-repeat;
      background-size: 21px 18px;
      background-position: right;
      padding-right: 30px;
    }
  }
}
</style>